<template>
  <div class="dashboard-container">
    <h1 style="font-size: 48px;margin-left: 200px;margin-top: 50px">主页</h1>
    <div style="font-size: 24px">
      <span style="margin-left: 50%">当月收入为：{{ this.revenue }} 元</span>
      <el-date-picker
        v-model="months"
        type="month"
        value-format="yyyy-MM"
        placeholder="选择月" style="margin-left: 40px"/>
      <el-button type="primary" style="margin-left: 40px" @click="updateMonth">
        查询</el-button>
      <el-button @click="selectMonth" style="margin-left: 40px">
        重置</el-button>
    </div>
    <div style="margin-top: 50px">
      <div style="margin-left: 10px;float: left">
        <p style="margin-left: 250px;font-size: 32px">酒店入住率</p>
        <PieChart :data="this.pieData" style="margin-left: 150px"/>
      </div>
      <div style="margin-left: 50px;float: left">
        <p style="margin-left: 350px;font-size: 32px">半年内收入</p>
        <BarChart :data="this.barData" style="margin-left: 150px"/>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectLiveNumber, selectRevenue, selectRevenueByMonth, selectRoomNumber } from '@/api/dashboard'
import PieChart from '@/components/PieChart.vue'
import BarChart from '@/components/BarChart.vue'

export default {
  name: 'Dashboard',
  components: { PieChart, BarChart },
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      months: '',
      roomNumber: '',
      liveNumber: '',
      revenue: '',
      revenueByMonth: '',
      pieData: [],
      barData: []
    }
  },
  mounted() {
    this.selectMonth()
    this.createPieChart()
  },
  methods: {
    selectMonth() {
      let data = new Date()
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      this.months = year + '-' + month
      this.selectRevenue()
      this.selectRevenueByMonth()
    },
    async selectRoomNumber() {
      await selectRoomNumber().then(
        response => {
          this.roomNumber = response.data
        }
      )
    },
    async selectLiveNumber() {
      await selectLiveNumber().then(
        response => {
          this.liveNumber = response.data
        }
      )
    },
    async createPieChart() {
      await this.selectRoomNumber()
      await this.selectLiveNumber()
      this.pieData = [
        { label: '已入住:', value: this.liveNumber, color: '#efc808' },
        { label: '未入住:', value: this.roomNumber - this.liveNumber, color: '#ff0e0e' }
      ]
    },
    selectRevenue() {
      selectRevenue({ month: this.months }).then(
        response => {
          this.revenue = response.data
        }
      )
    },
    selectRevenueByMonth() {
      if (this.months == null) {
        this.$message.error('查询月份不能为空！！！')
      } else {
        selectRevenueByMonth({ month: this.months }).then(
          response => {
            this.revenueByMonth = response.data
            this.barData = [
              { label: this.revenueByMonth[5].month, value: this.revenueByMonth[5].revenue, color: '#4CAF50' },
              { label: this.revenueByMonth[4].month, value: this.revenueByMonth[4].revenue, color: '#2196F3' },
              { label: this.revenueByMonth[3].month, value: this.revenueByMonth[3].revenue, color: '#FF9800' },
              { label: this.revenueByMonth[2].month, value: this.revenueByMonth[2].revenue, color: '#E91E63' },
              { label: this.revenueByMonth[1].month, value: this.revenueByMonth[1].revenue, color: '#bd8c9e' },
              { label: this.revenueByMonth[0].month, value: this.revenueByMonth[0].revenue, color: '#262022' }
            ]
          }
        )
      }
    },
    updateMonth() {
      this.selectRevenue()
      this.selectRevenueByMonth()
    }
  }
}
</script>xiugai
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
